<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />

    <script type="text/javascript" th:src="@{/lib/html5shiv.js}"></script>
    <script type="text/javascript" th:src="@{/lib/respond.min.js}"></script>


    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}" />
    <link rel="stylesheet" type="text/css"th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin" />
    <link rel="stylesheet" type="text/css"th:href="@{/h-ui.admin/css/style.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.css}" />


    <script type="text/javascript" th:src="@{/lib/DD_belatedPNG_0.0.8a-min.js}" ></script>
    <script>DD_belatedPNG.fix('*');</script>

    <title>角色管理列表</title>
</head>
<body>
<nav class="breadcrumb" style="margin-bottom: 5px"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 角色管理 <span class="c-gray en">&gt;</span> 角色管理列表</nav>
<div class="page-container" style="padding: 0 20px">
    <span  id="toolbar" class="l">
        <shiro:hasPermission name="role:insert">
        <a href="javascript:;" onclick="role_add()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加角色</a>
    </shiro:hasPermission>
    </span>
    <table id="dataTable" class="table table-border table-bordered table-bg">
    </table>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{/lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>


<script type="text/javascript">
    $(function () {
        $('#dataTable').bootstrapTable({
            url: '/logistics/role/list',//ajax请求的url地址
            pagination: true,
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true,//是否显示搜索框
            pageNumber: 1,//默认的页面 第一页
            pageSize: 10,//默认的每页条数
            pageList:[10,15,50,100],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            showRefresh: true, //是否显示刷新按钮
            columns: [
                {field: 'roleId',title: '角色编号'},
                {field: 'rolename',title: '角色名'},
                {field: 'remark',title: '角色描述'},
                {
                    field:'roleId',
                    title:'操作',
                    align:'center',
                    formatter:operationFormatter

                }],
            queryParams: function(params) {
                //此方法在用户分页或者搜索的时候回自动发送ajax请求调用，并把对应的参数传递给后台
                return {
                    pageNum: params.offset / params.limit + 1, //页码
                    pageSize: params.limit, //页面大小
                    keyword: params.search
                };
            }
        });

    });

    function operationFormatter(value,row,index){
        // console.log(row);
        var html ='<a title="编辑" href="javascript:;" onclick="role_edit('+row.roleId+')" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
        html += '<a title="删除"  href="javascript:;" onclick="role_del('+row.roleId+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
        return html;
    }

    function roleFormatter(value,row,index) {
        var html = '<span style="color:deepskyblue">菜单角色</span>'

        if (value == 'role'){

            html = '<span style="color: green">普通角色</span>'
        }
        return html;
    }

</script>


<script type="text/javascript">

    /*角色-增加*/
    function role_add(){
        layer.open({
            type: 2,
            title: '添加角色',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: [$(window).width()+'px',$(window).height()+ 'px'],
            content: ['/logistics/role/roleEdit', 'no']
        });
    }

    /*角色-编辑*/
    function role_edit(roleId){
        layer.open({
            type: 2,
            title: '编辑角色',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['800px', '400px'],
            content: ['/logistics/role/roleEdit?roleId='+roleId, 'no']
        });
    }
    /*角色-删除*/
    function role_del(roleId){
        layer.confirm('确认要删除吗？',function(){

            $.get("/logistics/role/delete?roleId="+roleId,function (data) {

                //操作结果提示
                layer.msg(data.msg,{icon: data.code,time:1000},function () {
                    //操作成功刷新数据
                    if (data.code == 1){
                        refresh();

                    }
                });

            })

        });
    }
    function  refresh() {
        $('#dataTable').bootstrapTable('refresh');
    }


</script>
</body>
</html>
